<script setup>
import {} from "vue";
import { useAudioStore } from "@/stores";
import { watch } from "vue";
import { ref } from "vue";

const audioStore = useAudioStore();
const props = defineProps({
  status: {
    type: Boolean,
  },
});

const positionPlay = ref(0);
watch(
  () => props.status,
  () => {
    if (props.status) {
      positionPlay.value = ((audioStore.playIndex + 1) * 100) / 2 - 50;
    } else {
      positionPlay.value = 0;
    }
  }
);

const playMusic = (id, index) => {
  audioStore.getMusicUrlData(id);
  audioStore.playIndex = index;
};

const deleteMusic = (index, name) => {
  audioStore.activeMusicList.splice(index, 1);
  uni.showToast({
    title: `已取消播放：${name}`,
    icon: "none",
  });
};
</script>

<template>
  <view class="home-play-list-wrap">
    <view class="home-play-list-title">
      当前播放
      <text class="small-title">
        ({{ audioStore.activeMusicList.length }}首)
      </text>
    </view>
    <scroll-view
      scroll-y
      class="home-play-list-scroll"
      :scroll-top="positionPlay"
      :scroll-with-animation="true"
      v-if="audioStore.activeMusicList.length !== 0"
    >
      <view
        class="play-list-wrap"
        v-for="(item, index) in audioStore.activeMusicList"
        :key="item.id"
        @tap="playMusic(item.id, index)"
      >
        <view
          class="music-info"
          :class="{
            isPlayClass:
              audioStore.activeMusicList[audioStore.playIndex].id === item.id,
          }"
        >
          <view
            class="privilege"
            v-show="audioStore.privileges[index]?.flLevel === 'none'"
          >
            VIP
          </view>
          <view class="music-name ellipsis1">
            {{ item.name }}
            <text class="author" v-for="author in item.ar" :key="author.name">
              {{ " · " + author.name }}
            </text>
          </view>
        </view>
        <i
          class="iconfont icon-chahao"
          @tap.stop="deleteMusic(index, item.name)"
        ></i>
      </view>
    </scroll-view>
    
    <view class="no-data" v-else>
      <image src="@/static/noData.png" mode="aspectFit" />
      <view class="no-data-tip">播放列表为空</view>
    </view>
  </view>
</template>

<style lang="scss">
.home-play-list-wrap {
  position: relative;
  height: 900rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  font-size: 28rpx;
  .home-play-list-title {
    line-height: 100rpx;
    margin-left: 30rpx;
    .small-title {
      font-size: 20rpx;
      color: $assistText;
    }
  }
  .isPlayClass {
    color: $primaryColor !important;
  }
  .home-play-list-scroll {
    height: 800rpx;
    .play-list-wrap {
      padding: 0 30rpx;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .music-info {
        width: 600rpx;
        display: flex;
        align-items: center;
        .privilege {
          line-height: 22rpx;
          width: 38rpx;
          border: 2rpx $primaryColor solid;
          font-size: 20rpx;
          text-align: center;
          color: $primaryColor;
          border-radius: 8rpx;
          margin-right: 10rpx;
        }
        .author {
          color: $assistText;
          font-size: 24rpx;
          white-space: pre;
        }
      }
      .icon-chahao {
        color: $assistText;
      }
    }
  }
  
  .no-data {
    margin-top: 60rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .no-data-tip {
      letter-spacing: 4rpx;
      line-height: 100rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: $assistText;
    }
  }
}
</style>
